<template>
  <div class="page-container">
    <el-card>
      <div slot="header">
        <span>商品管理</span>
      </div>

      <div class="toolbar">
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增商品</el-button>
      </div>

      <el-table :data="tableData" border stripe v-loading="loading">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="productName" label="商品名称"></el-table-column>
        <el-table-column prop="productCode" label="商品编码" width="150"></el-table-column>
        <el-table-column prop="price" label="价格" width="120"></el-table-column>
        <el-table-column prop="stock" label="库存" width="100"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
              {{ scope.row.status === 1 ? '上架' : '下架' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
      <el-form :model="form" ref="form" label-width="100px">
        <el-form-item label="商品名称">
          <el-input v-model="form.productName"></el-input>
        </el-form-item>
        <el-form-item label="商品编码">
          <el-input v-model="form.productCode"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model.number="form.price" type="number"></el-input>
        </el-form-item>
        <el-form-item label="库存">
          <el-input v-model.number="form.stock" type="number"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">上架</el-radio>
            <el-radio :label="0">下架</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getProductList, createProduct, updateProduct, deleteProduct } from '@/api/product';

export default {
  name: 'ProductIndex',
  data() {
    return {
      loading: false,
      tableData: [],
      currentPage: 1,
      total: 0,
      dialogVisible: false,
      isEdit: false,
      form: {
        id: null,
        productName: '',
        productCode: '',
        price: 0,
        stock: 0,
        status: 1
      }
    };
  },
  computed: {
    dialogTitle() {
      return this.isEdit ? '编辑商品' : '新增商品';
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.loading = true;
      setTimeout(() => {
        this.tableData = [
          {
            id: 1,
            productName: '测试商品',
            productCode: 'P001',
            price: 99.99,
            stock: 100,
            status: 1
          }
        ];
        this.total = 1;
        this.loading = false;
      }, 500);
    },
    handleAdd() {
      this.isEdit = false;
      this.form = { productName: '', productCode: '', price: 0, stock: 0, status: 1 };
      this.dialogVisible = true;
    },
    handleEdit(row) {
      this.isEdit = true;
      this.form = { ...row };
      this.dialogVisible = true;
    },
    handleDelete(row) {
      this.$confirm('确定要删除该商品吗?', '提示', {
        type: 'warning'
      }).then(() => {
        deleteProduct(row.id).then(() => {
          this.$message.success('删除成功');
          this.loadData();
        });
      });
    },
    handleSubmit() {
      const api = this.isEdit ? updateProduct : createProduct;
      api(this.form).then(() => {
        this.$message.success(this.isEdit ? '更新成功' : '创建成功');
        this.dialogVisible = false;
        this.loadData();
      });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadData();
    }
  }
};
</script>
